<template>
  <div class="reply-input-wrapper" style="display: none" ref="reply">
    <textarea
      class="comment-textarea"
      :placeholder="'回复 @' + nickname + '：'"
      auto-grow
      dense
      v-model="commentContent"
    />
    <div class="emoji-container">
      <span @click="handleClick" style="color: #ed9d2e">
        <i class="iconfont iconbiaoqing" />
      </span>
      <div style="margin-left: auto">
        <button
          @click="cancleReply"
          class="comment-btn"
          style="margin-right: 15px"
        >
          取消
        </button>
        <button @click="insertReply" class="comment-btn">发布</button>
      </div>
    </div>
    <!-- 表情框 -->
    <Emotion
      v-show="showDialog"
      class="emoji-picker"
      @emotion="handleEmotion"
    />
  </div>
</template>

<script>
import Emotion from "@/components/common/Emotion/Emotion.vue";

export default {
  components: {
    Emotion,
  },
  props: {
    parentConId: {
      type: Number,
    },
  },
  data: function () {
    return {
      index: 0,
      showDialog: false,
      nickname: "",
      replyUserId: null,
      parentId: null,
      commentContent: "",
    };
  },
  methods: {
    handleEmotion(emoji) {
      this.commentContent += `[${emoji.text}]`;
    },
    handleClick() {
      this.showDialog = !this.showDialog;
    },
    cancleReply() {
      this.$refs.reply.style.display = "none";
    },
    async insertReply() {
      //判断登录
      let userInfo = this.$store.state.userInfo;
      if (!userInfo) {
        this.$store.state.loginFlag = true;
        return false;
      }
      //判空
      if (this.commentContent.trim() === "") {
        this.$message({
          message: "评论不能为空",
          type: "error",
          offset: 80,
        });
        return false;
      }
      const { data: res } = await addFirstComment({
        content: this.commentContent,
        blogId: this.$route.params.articleId,
        userId: this.$store.state.userInfo.userId,
        parentId: this.parentConId,
      });
      if (res.status === 200) {
        // this.getBlogInfomation()
        this.$message({ message: res.message, type: "success", offset: 80 });
      } else {
        this.$message({ message: "评论发表失败！", type: "error", offset: 80 });
      }
    },
    addEmoji(text) {
      this.commentContent += text;
    },
  },
};
</script>

<style scoped>
.reply-input-wrapper {
  border: 1px solid #90939950;
  border-radius: 4px;
  padding: 10px;
  margin: 0 0 10px;
}
.comment-textarea {
  font-size: 0.875rem;
  color: #555 !important;
  outline: none;
  padding: 10px 0;
  min-height: 94px;
  resize: none;
  border: none;
  width: 100%;
  border-radius: 4px;
}
.emoji-container {
  display: flex;
}
.comment-btn {
  border: 0;
  background: #12b7de;
  /* height: 100%;
  width: 100%; */
  outline: none;
  color: #fff;
  border-radius: 20px;
  font-weight: normal;
  cursor: pointer;
  text-align: center;
  padding: 6px 16px;
  font-size: 14px;
}
</style>
